<template>
  <div>
    <el-col :span="12">
      <ve-line class="dianya_chart" style="width: 98%;border-style: solid;border-width: 3px;border-color: #D2B48C;padding-top: 10px"
               :data="chartData"
               :extend="chartExtend"
               :colors="colors1"
               judge-width
      ></ve-line>
    </el-col>
    <el-col :span="12">
      <ve-line class="dianliu_chart" style="left: 2%;border-style: solid;border-width: 3px;border-color: #D2B48C;padding-top: 10px"
               :data="chartData2"
               :extend="chartExtend"
               :colors="colors2"
               judge-width
      ></ve-line>
    </el-col>
    <el-col style="padding-top: 12px" :span="12">
      <ve-line class="songsi_chart" style="width: 98%;border-style: solid;border-width: 3px;border-color: #D2B48C;padding-top: 10px"
               :data="chartData3"
               :extend="chartExtend"
               :colors="colors3"
               judge-width
      ></ve-line>
    </el-col>
    <el-col style="padding-top: 12px" :span="12">
      <ve-line class="resi_chart" style="left: 2%;border-style: solid;border-width: 3px;border-color: #D2B48C;padding-top: 10px"
               :data="chartData4"
               :extend="chartExtend"
               :colors="colors4"
               judge-width
      ></ve-line>
    </el-col>
    <!--    <el-tooltip v-for="item in welding" :key="item.id">
          <p>{{item.hanjidianya}}</p>
        </el-tooltip>-->
  </div>
</template>

<script>
export default {
  name: 'Monitoring',
  data () {
    this.chartExtend = {
      grid: {
        x: 10,
        y: 40,
        y2: 20,
        width: '97%'
      }
    }
    this.colors1 = ['#d04714']
    this.colors2 = ['#ec9862']
    this.colors3 = ['#39b8c5']
    this.colors4 = ['#32ce8c']
    return {
      welding: [],
      dianya: '',
      chartData: {
        columns: ['时刻', '焊机电压'],
        rows: []
      },
      chartData2: {
        columns: ['时刻', '焊机电流'],
        rows: []
      },
      chartData3: {
        columns: ['时刻', '送丝速度'],
        rows: []
      },
      chartData4: {
        columns: ['时刻', '热丝电流'],
        rows: []
      },
      chartColor: ['red', 'black']
    }
  },
  mounted: function () {
    this.loadData()
  },
  methods: {
    loadData () {
      this.$http({
        url: this.$http.adornUrl('P2/hanji1'),
        method: 'get',
      }).then(response => {
          this.welding = response.data
          this.paintDianya()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    paintDianya () {
      // 重置列数，否则i不断叠加
      this.dianya = this.welding[0].hanjidianya
      this.chartData.rows = []
      for (var i = 0; i < this.welding.length; i++) {
        this.chartData.rows.push({
          '时刻': String(i + 1),
          '焊机电压': this.welding[this.welding.length - 1 - i].hanjidianya
        })
      }
    },
    paintDianliu () {
      this.chartData2.rows = []
      for (var i = 0; i < this.welding.length; i++) {
        this.chartData2.rows.push({
          '时刻': String(i + 1),
          '焊机电流': this.welding[this.welding.length - 1 - i].hanjidianliu
        })
      }
    },
    paintSongsi () {
      this.chartData3.rows = []
      for (var i = 0; i < this.welding.length; i++) {
        this.chartData3.rows.push({
          '时刻': String(i + 1),
          '送丝速度': this.welding[this.welding.length - 1 - i].songsisudu
        })
      }
    },
    paintResi () {
      this.chartData4.rows = []
      for (var i = 0; i < this.welding.length; i++) {
        this.chartData4.rows.push({
          '时刻': String(i + 1),
          '热丝电流': this.welding[this.welding.length - 1 - i].residianliu
        })
      }
    }
  }
}
</script>

<style scoped>
</style>
